<template>
    <div id="emp">
        <!-- 面包屑，导航栏 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>员工管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- <el-button type="primary" size="large" @click="getnew">新建</el-button> -->

        <el-card class="box-card" shadow="always">
            <!-- card头部 -->
            <template #header>
                <div class="card-header">
                    <span class="title">员工管理</span>
                    <el-button
                    class="button"
                    type="primary"
                    :icon="Plus"
                    >添加新员工</el-button>
                </div>
            </template>
            <!-- 员工信息列表 -->
            <el-table :data="tableData" >
                <!-- 扩展行显示 -->
                <el-table-column type="expand">
                    <template #default="scope">
                        <div style="padding: 10px;">
                            <el-descriptions 
                            class="margin-top" 
                            :title="'员工：' + scope.row.ename" 
                            :column="6" 
                             
                            border>
                                
                                <template #extra>
                                    <el-button type="primary"
                                    >Operation</el-button>
                                </template>

                                <el-descriptions-item width="20px">
                                    <template #label>
                                        <div class="cell-item" >
                                            <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon>
                                            员工编号
                                        </div>
                                    </template>
                                    {{ scope.row.empno }}
                                </el-descriptions-item>

                                <el-descriptions-item width="20px">
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <iphone />
                                            </el-icon>
                                            员工姓名
                                        </div>
                                    </template>
                                    {{ scope.row.ename }}
                                </el-descriptions-item >

                                <el-descriptions-item width="150px">
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <location />
                                            </el-icon>
                                            入职时间
                                        </div>
                                    </template>
                                    {{ scope.row.hiredate }}
                                </el-descriptions-item>

                                <el-descriptions-item width="20px">
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <tickets />
                                            </el-icon>
                                            岗位
                                        </div>
                                    </template>
                                    {{ scope.row.job }}
                                </el-descriptions-item>

                            </el-descriptions>

                            <h3>部门</h3>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="empno" label="员工编号" width="180" />
                <el-table-column prop="ename" label="姓名" width="180" />
                <el-table-column prop="job" label="岗位" width="180" />
                <el-table-column prop="mgr" label="领导编号" width="180" />
        
                <el-table-column prop="deptno" label="部门编号" />

                <el-table-column prop="deptno" label="部门">
                    <template #default="scope">
                        {{
                            scope.row.dept == null ? '' : scope.row.dept.dname
                        }}
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog v-model="dialogVisible" title="注册员工" width="30.9%">
            <el-form label-width="80px">
                <el-form-item label="员工编号">
                    <el-input v-model="form.empno" placeholder="请输入员工编号" />
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.ename" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="岗位">
                    <el-input v-model="form.job" placeholder="请输入岗位" />
                </el-form-item>
                <el-form-item label="领导编号">
                    <el-input v-model="form.mgr" placeholder="请输入领导编号" />
                </el-form-item>
                <el-form-item label="入职时间">
                    <el-input v-model="form.hiredate" placeholder="请输入入职时间" />
                </el-form-item>
                <el-form-item label="工资">
                    <el-input v-model="form.sal" placeholder="请输入工资" />
                </el-form-item>
                <el-form-item label="奖金">
                    <el-input v-model="form.comm" placeholder="请输入奖金" />
                </el-form-item>
                <el-form-item label="部门">
                    <el-select @click="loaddate" v-model="value" class="m-2" placeholder="请选择员工所在部门" @change="valueChange"
                        @key-value="value">
                        <el-option v-for="item in options" :key="item.deptno" :label="item.dname" :value="item.deptno" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="add" type="primary">新增</el-button>
                    <el-button @click="notadd" type="primary">取消</el-button>
                </el-form-item>
                <!-- <el-form-item label="部门编号">
                <el-input v-model="form.deptno" placeholder="请输入部门编号" />
            </el-form-item> -->
            </el-form>
        </el-dialog>
    </div>
</template>


<script setup>
import { ref } from 'vue';
import $ajax from '../../utils/axios'
import { ArrowRight } from '@element-plus/icons-vue'
import {
    Iphone,
    Location,
  
    Tickets,
    User,
} from '@element-plus/icons-vue'


const dialogVisible = ref(false);
const tableData = ref([])
const form = ref({
    empno: '1234',
    ename: 'zzj',
    job: 'CLERK',
    mgr: '7782',
    hiredate: '1982-01-23',
    sal: '1200.00',
    comm: '1',
    deptno: '20'
})//页面展示数据



const options = ref([
    {
        deptno: '',
        dname: '请选择'
    }
])//新增时储存部门数
const value = ref("")//新增时所选部门

// 为表格加载数据
const loaddata = async () => {
    // 1.定义请求路径
    const path = "/emp/q/all"
    // 发同步请求
    // 发完ajax请求以后，进入等待状态，直到服务器作出相应或者超时，
    // 并且返回服务器响应的数据，存到res中
    // const res= await $ajax.get(path)//只有成功了才会执行下一行
    // 2.解构data属性
    const { data: res } = await $ajax.get(path)
    //3.应用结果
    console.log(res);
    // tableData.value=res.data.result;
    if (res.code === 200) {
        tableData.value = res.result;
    }
}
loaddata()

// //主页面新增函数
// const getnew = () => {
//     dialogVisible.value = true;
// }

// 员工注册 PUT
const add = () => {

    form.value.deptno = value.value;
    dialogVisible.value = false;
    const path = "dept/add";
    $ajax.put(path, form.value, {
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        }
    })
    //.then(res => {
    //   form.value.deptno = res.data.result;
    //   let obj = JSON.parse(JSON.stringify(form.value));

    //   tableData.value.push(obj);
    //   console.log("PUT 请求成功", res.data);
    //   dialogVisible.value = false;
    // })
}



const notadd = () => {
    dialogVisible.value = false;
}

let loaddate = async () => {
    const path = '/emp/q/all'
    const { data: res } = await $ajax.get(path)
    if (res.code === 200) {
        tableData.value=res.result
        options.value = res.result
        console.log(options.value);
    }
}
</script>

  <!-- 加一个dialog对话框，填上form内容，用select组件完成部门编号的录入，
添加新员工 -->

<style scoped lang="scss">
.el-card__header {
  padding: 0;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 24px;
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
  margin-top: 12px;
  border-radius: 12px;
}
.margin-top{
    
    .cell-item{
    // background-color: red;
    width: 80px;
    margin-left: 0px;
    }
}
</style>